import React, { useState, useEffect, useRef } from 'react';
import styles from './index.less';


export default (props) => {
    const [isFullScreen, setIsFullScreen] = useState(false)
    const rootRef = useRef();
    const videoBox = document.getElementById('vb');
    useEffect(() => {
        // 监听页面全屏事件
    window.onresize = () => {
        // 全屏
        if (document.fullscreenElement) {
          setIsFullScreen(true)
        }
        // 不是全屏
        else {
          setIsFullScreen(false)
        }
      }
    }, [])
    const openVideo = () => {
        if (!isFullScreen) {
            rootRef.current.requestFullscreen();
        } else {
            document.exitFullscreen();
        }
    }
    return(
        <div>
            <div className={styles.player} id='vb' ref={rootRef}>
                <video id='vd' src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls style={{ objectFit: 'contain' }}>

                </video> 
                <div className={styles.video_name}>Video Name Video Name Video Name Video Name</div>
                <div onClick={openVideo} className={styles.video_status} id='log'>
                <img src="http://wx4.sinaimg.cn/large/006ARE9vgy1fs9w9ukwjhj30g40afaap.jpg" alt="" />
                </div>
            </div>
        </div>
    )
}